<template>
	<div>
		<a-card>
			<a-table
				:columns="columns" 
				:data-source="page.list" 
				rowKey="userId"
				bordered
				:pagination="false"
				:loading="loading">
				<template slot="num" slot-scope="text, record, index">
					{{(page.currentPage - 1)*page.pageSize+parseInt(index)+1}}
				</template>
				<template slot="isTop" slot-scope="text,record">
					<a-switch 
						:default-checked="text == 0 ? false : true"
						:disabled="disableTop"
						@change="enableTop(record.blogId, text)"/>
				</template>
				<template slot="avatar" slot-scope="text">
					<a-avatar :size="64" icon="user" :src="text" />
				</template>
				<template slot='gender' slot-scope="text">
					<a-tag color="#5133e9" v-if="text == 0">
						保密
					</a-tag>
					<a-tag color="#108ee9" v-else-if="text == 1">
						男
					</a-tag>
					<a-tag color="#e95cbf" v-else-if="text == 2">
						女
					</a-tag>
				</template>
				<template slot='deleted' slot-scope="text">
					<a-tag color="#87d068" v-if="text == 0"> 
						正常
					</a-tag>
					<a-tag color="orange" v-else-if="text == -1">
						已冻结
					</a-tag>
					<a-tag color="#f50" v-else-if="text == -2">
						已注销
					</a-tag>
				</template>
				<template slot="operation" slot-scope="text,record">
					<div class="editable-row-operations">
<!-- 						<a-button type="primary">
							修改
						</a-button>
						<a-button type="link" @click="handleBlogRead(record.userId)">
							查看
						</a-button> -->
						<a-popconfirm v-if="record.deleted == 0" title="你确定要冻结此用户吗？" ok-text="Yes" cancel-text="No" @confirm="operateUser(record.userId, record.deleted)">
							<a-button type="danger" :loading="operateLoading">
								冻结
							</a-button>
						</a-popconfirm>
						<a-popconfirm v-else title="你确定要取消冻结此用户吗？" ok-text="Yes" cancel-text="No" @confirm="operateUser(record.userId, record.deleted)">
							<a-button type="primary" :loading="operateLoading">
								恢复
							</a-button>
						</a-popconfirm>
					</div>
				</template>
			</a-table>
			<a-pagination 
				v-model="page.currentPage"
				:page-size-options="['5','10','20','50']"
				:total="page.totalCount"
				show-size-changer
				:page-size="page.pageSize"
				@showSizeChange="onSizeChange"
				@change="onPageChange">
			</a-pagination>
		</a-card>
	</div>
</template>

<script>
	import {userColumns as columns} from '@/assets/js/tableList/UserTable.js'
	import {getUserByPage,freezeUser} from '@/api/User.js'
	export default {
		name: 'UserList',
		data () {
			return {
				loading: true,
				operateLoading: false,
				columns: [],
				page: {
					currentPage: 1, // 当前页
					pageSize: 5, // 每页显示条数
					totalPage: 0, // 总页数
					totalCount: 0, // 总条数
					params: {}, // 查询参数对象
					list: [], // 数据
					sortColumn: '', // 排序列
					sortMethod: 'asc' // 排序方式
				}
			}
		},
		created() {
			this.initTable()
			this.fetchUserData()
		},
		methods: {
			// 初始化表格列表
			initTable () {
				this.columns = columns
			},
			// 分页加载博客列表数据
			async fetchUserData () {
				const {
					data: res
				} = await getUserByPage(this.page);
				console.log(res)
				if (res.code !== 20005)
					return this.$message.error('查询出错')
				this.page = res.data
				// 消除不必要产生的查询参数
				this.page.index = undefined
				this.loading = false
				this.$message.success(res.msg)
			},
			onPageChange (newPage) {
				this.page.currentPage = newPage
				this.fetchUserData()
			},
			// 页面变化
			onSizeChange(current, newSize) {
				this.page.pageSize = newSize;
				this.fetchUserData()
			},
			// 冻结用户 -1 表示冻结 -2 表示注销
			async operateUser (id, state) {
				this.operateLoading = true
				// 取反用户状态
				const status = state == 0 ? -1 : 0
				const {data : res} = await freezeUser(id, status)
				if (res.code !== 20004) 
					return this.$message.error('冻结失败')
				setTimeout(()=>{
				},800)
				this.operateLoading = false
				// 数据量大之后，考虑修改数组
				this.fetchUserData()
				return this.$message.success(res.msg)
				
			}
		}
	}
</script>

<style>
</style>
